<template>
  <el-drawer
    class="dia-style"
    :title="title"
    :visible.sync="open"
    size="50%"
    :close-on-click-modal="false"
    :wrapper-closable="false"
    @close="cancel">
    <div class="drawer-container">
      <HkForm
        ref="hkFormRef1"
        :form-labels="formLabel"
        :rules="formRules"
        :data="formData"
        :dict-list="dictList"
        :btn-hidden="true"
        label-width="140"
        label-position="left">
        <template #filter-base>
          <el-col :span="24" style="margin-left: -160px">
            <div class="tips">基础信息</div>
          </el-col>
        </template>
        <template #filter-formInfo>
          <el-col :span="24" style="margin-left: -160px">
            <div class="tips">表单信息</div>
          </el-col>
        </template>
        <!-- 待核实设备信息 -->
        <template #filter-waitingData>
          <div>
            <span>IP地址：</span><span>{{ formData.ip ? formData.ip : '-' }}</span>
          </div>
          <div>
            <span>MAC地址：</span><span>{{ formData.mac ? formData.mac : '-' }}</span>
          </div>
        </template>
      </HkForm>
      <div>
      <my-generate-form ref="generateForm" :data="jsonData" :value="jsonValue" @on-change="handleGenerateChage" />
      </div>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="handleSubmit()">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import MyGenerateForm from '@/views/dispose/incidentHandle/components/GenerateForm.vue'
import { formVariables, verify } from '@/api/assets/unknownAssets'
export default {
  components: { HkForm, MyGenerateForm },
  data() {
    return {
      title: '发起核实工单',
      open: false,
      formData: {},
      formRules: {},
      formLabel: [
        {
          label: '',
          field: 'base',
          type: 'slot',
          span: 24,
        },
        {
          label: '待核实设备信息',
          field: 'waitingData',
          type: 'slot',
          span: 24,
        },
        // {
        //   label: '流程',
        //   field: 'type',
        //   type: 'select',
        //   list: 'typeList',
        //   span: 24,
        // },
        // {
        //   label: '标题',
        //   field: 'name',
        //   type: 'input',
        //   maxlength: 20,
        //   span: 24,
        // },
        {
          label: '',
          field: 'formInfo',
          type: 'slot',
          span: 24,
        },
        /*  {
          label: '期望完成时间',
          field: 'name',
          type: 'input',
          maxlength: 30,
          span: 24,
        },

        {
          label: '发起事由',
          field: 'case',
          type: 'textarea',
          maxlength: 200,
          span: 24,
          attrs: {
            rows: 4,
            cols: 4,
          },
        }, */
      ],
      dictList: {},
      detailsLists: [
        { label: 'IP地址:', field: 'source_app', span: 12 },
        { label: 'MAC地址:', field: 'source_app', span: 12 },
        { label: '首次发现时间:', field: 'source_app', span: 12 },
        { label: '末次发现时间:', field: 'source_app', span: 12 },
      ],
      jsonData: {},
      jsonValue: {},
      formJson: {},
    }
  },
  methods: {
    show(baseInfo) {
      this.formData = baseInfo
      this.getProcess()
      this.open = true
    },
    /** 获取发起工单表单 */
    getProcess() {
      formVariables().then((res) => {
        // this.formTitle = res?.name
        this.jsonData = res?.formTemplate ? JSON.parse(res?.formTemplate) : {}
      })
    },
    // 提交表单
    handleGenerateChage(field = '', value = '', data = {}) {
      this.formJson = data
    },
    //  提交表单
    handleSubmit(validate = true) {
      
      this.$refs.generateForm.getData(validate).then((data) => {
        verify({ id: this.formData.id, formJson: JSON.stringify(data) }).then((res) => {
          this.$message.success('保存成功')
          this.$refs.generateForm.reset()
          this.cancel()
          this.$emit('handleSubmit')
        })
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-col-6 {
  width: auto !important;
}
::v-deep .v-modal {
  z-index: 2001 !important;
}
.el-form {
  display: block !important;
}
</style>
